<template>
	<view class="mdd">
		<view class="mdd_item" v-for="index in 4" :key="index">
			<view class="name">
				乌鲁木齐
			</view>
			<view class="desc">
				当前精选
			</view>
		</view>
	</view>

</template>

<script>


</script>

<style lang="scss" scoped>
	.mdd {
		margin: 20rpx;
		display: flex;
		flex-wrap: wrap;

		&_item {
			width: 25%;
			text-align: center;
			padding: 20rpx 0;

			&:active {
				background: rgba(0, 0, 0, .1);
				border-radius: 20rpx;
			}

			.name {
				font-weight: bold;
				color: #333;
			}

			.desc {
				font-size: 22rpx;
				background: #eee;
				border-radius: 30rpx;
				display: inline-block;
				padding: 2rpx 20rpx;
				margin-top: 5rpx;
				color: #666;
			}
		}
	}
</style>